<template>
  <div class="hd">
    <div class="hd mt10">
      <img src="../../assets/banner.png" alt="">
    </div>
    <mall-bar :showsearch="false" :activeitem="0" :menu="menu"></mall-bar>
    <position>
      <router-link :to="productPush.push">{{productPush.name}}</router-link>
      &gt;
      <span class="last">常识详情</span>
    </position>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- main -->
      <h2 class="common-title">
        <span class="main">百科详情</span>
      </h2>
      <div class="clearfix product-detail-header">
        <h2>
          {{infoDetail.title}}
        </h2>
        <div class="myIntro">
          {{infoDetail.intro}}
        </div>
        <!-- <div class="firstImg">
          <img :src="infoDetail.image" alt="">
        </div>
        <div v-html="infoDetail.topContent" class="contentP">
        </div> -->
        <div class="lastImg">
          <img :src="infoDetail.image" alt="">
        </div>
        <div v-html="infoDetail.content" class="contentP" style="lineHeight:24px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MallBar from '../../components/MallBar'
import Position from '../../components/Position'
export default {
  components: {MallBar, Position},
  data () {
    return {
      productNum: 1,
      goodsNum: 0,
      activeTab: 'first',
      product: {
        goodsPrice: 0
      },
      productPush:{push:'',name:''},
      infoDetail: {},
      menu: [
          {name: '健康常识', path: '/info'},
          {name: '养生', path: '/info'},
          {name: '减肥', path: '/reduces'},
          {name: '美容', path: '/cosmetology'},
          {name: '母婴', path: '/mother'},
          {name: '慢病', path: '/chronic'}
      ]
    }
  },
  mounted () {
    this.infoDetail = JSON.parse(sessionStorage.getItem('curInfo'))
    if(this.infoDetail.id <20){
      this.productPush = {push:'/info',name:'养生'}
    }else if( this.infoDetail.id >20 && this.infoDetail.id <40){
      this.productPush = {push:'/reduces',name:'减肥'}
    }else if( this.infoDetail.id >40 && this.infoDetail.id <60){
      this.productPush = {push:'/cosmetology',name:'美容'}
    }else if( this.infoDetail.id >60 && this.infoDetail.id <80){
      this.productPush = {push:'/mother',name:'母婴'}
    }else if( this.infoDetail.id >80 && this.infoDetail.id <100){
      this.productPush = {push:'/chronic',name:'慢病'}
    }
  },
  filters: {
    fixed (val) {
      return val.toFixed(2)
    },
    hideText (val) {
      if (val) {
        let arr = val.split('')
        return arr[0] + '*'.repeat(arr.length - 1)
      }
      return ''
    }
  },
  methods: {
    buy () {
      this.dialogVisiable = true
    },
    addToCart () {
      this.$router.push('/cloud')
    },
    handleTabClick (tab) {
      console.log(tab)
    },
    activeGoods (good) {
      this.product.goodsList.forEach(v => {
        v.active = false
      })
      this.goodsNum = good.goodsStorage
      this.product.goodsPrice = good.goodsPrice
      good.active = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.common-title {
  padding: 20px;
  border-bottom: 2px solid #FCF6F2;
  overflow: hidden;
  .main {
    float: left;
    color: @color-primary;
    font-size: 1.2em;
  }
  .sub {
    float: left;
    margin-left: 80px;
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    .iconfont {font-size: 12px;}
    dt , dd{float: left;margin-left: 20px;cursor: pointer;}
  }
}
.product-detail-header {
  overflow: hidden;
  padding: 30px;
  h2{
    text-align: center;
  }
  .myIntro{
    width: 100%;
    margin: 20px 0;
    background: #eee;
    padding: 15px;
  }
  .firstImg{
    width: 100%;
    text-align: center;
    margin: 20px 0;
    img{
      width: 200px;
    }
  }
  .lastImg{
    width: 100%;
    text-align: center;
    margin: 20px 0;
    img{
      width: 400px;
    }
  }
  .contentP{
    /deep/ p{
      text-indent: 1.5em;
    }
  }
}
.product-main {
  margin: 20px;
}
</style>
